{% extends 'layout.html' %}

{% block  body %}
    <!-- 简介部分 -->
    <div class="flex mb-8 border-b border-gray-400 py-8">
      <div class="mr-6">
        <img src="{{ url_for('static', filename='images/create_img.png') }}" width="80px" alt="">
      </div>
      <div>
        <div class="text-white text-2xl">
          AI 作画 ....
        </div>
        <div class="text-white">
          左侧输入关键词, 点击Run, 右侧将会显示创作后的结果,
          可以点击Download下载,
          可以点击Clear清除左侧关键词.
        </div>
      </div>
    </div>
    <!-- 主题内容 -->
    <div class="m-4">
      <label>选择生成的图片尺寸:</label>
      <label class="mx-2">
        <input type="radio" name="img_size" value="256x256"> 256x256
      </label>
      <label class="mx-2">
        <input type="radio" name="img_size" value="512x512" checked> 512x512
      </label>
      <label class="mx-2">
        <input type="radio" name="img_size" value="1024x1024"> 1024x1024
      </label>
    </div>
    <div class="flex  h-full max-h-[calc(100%-400px)]">
      <div class="w-2/5  border-gray-600">
        <form action="/create_img" class="w-full h-full">
            <textarea class="outline-none w-full h-full px-6 bg-primary-100 text-white rounded-lg" 
                      name="query" id="query" placeholder="请输入描述信息"></textarea>
        </form>
      </div>
      <div class="w-1/5  flex flex-col justify-center mx-auto">
        <div class="flex flex-col mx-auto my-2 space-y-4 font-mono text-white text-sm font-bold leading-6 max-w-xs">
          <button type="button" id="run"  class="h-12 w-40 bg-indigo-600 items-center text-white text-sm leading-6 font-medium py-2 px-3 rounded-lg hover:bg-indigo-700">Run</button>
        </div>
        <div class="flex flex-col mx-auto my-2 space-y-4 font-mono text-white text-sm font-bold leading-6 max-w-xs">
         <button id="download" type="button" class="h-12 w-40 bg-indigo-600 items-center text-white text-sm leading-6 font-medium py-2 px-3 rounded-lg">Download</button>
        </div>
        <div class="flex flex-col mx-auto my-2 space-y-4 font-mono text-white text-sm font-bold leading-6 max-w-xs">
          <button type="button" id="clear" class="h-12 w-40 bg-indigo-600 items-center text-white text-sm leading-6 font-medium py-2 px-3 rounded-lg">Clear</button>
         </div>
      </div>
      <div class="w-2/5">
          <div id="result" 
               class="h-full px-6 bg-primary-100 text-white   rounded-lg">
          </div>
      </div>
    </div>
  </div>
  <script>
    // 点击run，执行
    $('#run').click(function(){
      // 获取图片尺寸 
      var img_size = $("input[type='radio']:checked").val();
      // 获取输入框的内容
      var query = $('#query').val();
      if ( !query ){
          show_error('请填写描述信息');
          return false;
        }
      // 弹出正在创作
      show_info('正在创作')
      // 提交表单
      $.ajax({
        url: '/create_img',
        type: 'post',
        data: {'img_size':img_size, 'query': query},
        dataType: 'json',
        success: function(res){
          if (res.status_code == 1){
            content = '<img src="' + res.content + '"/>'  
            $("#result").html(content)
          } else {
            show_error(res.content)
          }
        },
        error:function (res) {
            show_error('请求失败')
        }
      })
    })

    // 点击download下载
    $('#download').click(function(){
        var base64Data = $('#result').children('img').attr('src');
        if (!base64Data){
          show_error('暂无保存的图片');
          return false;
        }
        downloadBase64File(base64Data, '下载.png');
    }) 
    
    // 点击clear按钮
    $('#clear').click(function(){
      clear_query()
    })

  </script>


{% endblock %}